@use '../variables';

$block: '.#{variables.$ns}spin';

#{$block} {
    display: inline-block;
    backface-visibility: hidden;
    animation: #{variables.$ns}spin 1s linear infinite;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }

    &__inner {
        box-sizing: border-box;
        height: 100%;
        width: 50%;
        margin-inline-start: 50%;
        border: 2px solid var(--g-color-line-brand);
        border-inline-start: none;
        border-start-end-radius: 25px;
        border-end-end-radius: 25px;
    }

    &_size {
        &_xs {
            width: 16px;
            height: 16px;
        }

        &_s {
            width: 24px;
            height: 24px;
        }

        &_m {
            width: 28px;
            height: 28px;
        }

        &_l {
            width: 32px;
            height: 32px;
        }

        &_xl {
            width: 36px;
            height: 36px;
        }
    }
}

@keyframes #{variables.$ns}spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
